<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'fileupload.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
   <body>
    <form action="<%=basePath%>user/upload2" method="post" enctype="multipart/form-data" name="uploadForm">
    	<table border="1" width="400px">
    		<tbody>
    		<tr id="1">
    			<td>
    			请选择文件：
    			</td>
    			<td>
    				<input type="file" name="files"/><input type="button" value="删除" onclick="delItem(1)"/>
    			</td>
    		</tr>
    		</tbody>
    		<tr>
    			<td colspan="2"><input type="button" value="添加" onclick="addIten()"/></td>
    		</tr>
    		<tr>
    			<td colspan="2"><input type="button" value="上传" onclick="checkSunbit()"/></td>
    		</tr>
    	</table>
    </form>
    
    <script type="text/javascript">
    	var id = 2;
    	//添加一行
    	function addIten(){
    		var trNode = document.createElement("tr");
    		trNode.setAttribute("id", id);
    		
    		var tdNode1 = document.createElement("td");
    		tdNode1.innerHTML = "请选择文件：";
    		
    		var tdNode2 = document.createElement("td");
    		var input1 = document.createElement("input");
    		input1.setAttribute("type", "file");
    		input1.setAttribute("name", "files");
    		var input2 = document.createElement("input");
    		input2.setAttribute("type", "button");
    		input2.setAttribute("value", "删除");
    		input2.setAttribute("onclick", "delItem("+id+")");
    		tdNode2.appendChild(input1);
    		tdNode2.appendChild(input2);
    		
    		trNode.appendChild(tdNode1);
    		trNode.appendChild(tdNode2);
    		
    		var tbodyNode = document.getElementsByTagName("tbody")[0];
    		tbodyNode.appendChild(trNode);
    		
    		id++;
    	}
    	
    	//删除一行（根据tr的id值删除）
    	function delItem(id){
    		if(id>1){
	    		var trNode = document.getElementById(id);
	    		var tbodyNode = document.getElementsByTagName("tbody")[0];
	    		tbodyNode.removeChild(trNode);
	    		
	    		id--;
    		}
    	}
    	//提交并且检查file属性
    	function checkSunbit(){
    		//检查file属性是否全部填上
    		var fileList = document.getElementsByName("files");
    		for(var i=0;i<fileList.length;i++){
    			//如果为选择file，则其value值为空
    			if(fileList[i].value==null || fileList[i].value==""){
    				alert("请选择第"+(i+1)+"个文件");
    				return;
    			}
    		}
    		//提交表单
    		var form = document.forms['uploadForm'];
    		form.submit();
    	}
    </script>
  </body>
  
  
  <%-- 
  <body>
    <form action="/user/upload.action" method="post" enctype="multipart/form-data">
	文件： <input name="files" type="file" /><br/>
	文件： <input name="files" type="file" /><br/>
	文件： <input name="files" type="file" /><br/>
	     <input type="submit" value=" 提交 "/>
      </form>
  </body>
--%>

</html>